<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            margin-top: 10px;
            opacity: .5;
        }

        .line {
            width: 1000px;
            height: 5px;
            background-color: #000;
            margin: 10px 0;
        }

        .btn-start {
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="line"></div>
    <button class="btn-start">改变样式</button>

    <script>
        // 思路分析:
        // 需要控制哪个标签   div span ---->   dom 
        // 控制这个标签什么样式(属性)  width height margin padding ---->  prop
        // 把这些样式存放在一个对象中  {width:500,height:300,margin:200}

        // option  =  {width:500,height:300,margin:200}
        // 设置这个标签的属性值为多少  1000px  500px  100px   ----> value

        // 动画原理:
        // 目标属性值 = 当前属性值 + 步长 
        // 步长 = (目标属性值 - 当前属性值) / 数字
        // 计算步长的目的: 让步长接近 1 或者 -1;  越来约小
        // 数字为控制运动的速度, 值越小,速度越快, 值越大,速度越慢

        // 编写代码：V4.0.0
        function animate(dom, option, callback) {
            // 清除定时器
            clearInterval(dom.timer);
            // 绑定定时器
            dom.timer = setInterval(function () {
                // 定义布尔值 
                var isStop = true;
                // 循环option对象
                for (var prop in option) {
                    // 获取属性名称的目标值
                    var _targetVal = parseInt(option[prop]);
                    // 获取dom属性名称的当前值
                    var _cur = parseInt(getComputedStyle(dom)[prop]);
                    // 计算步长
                    var speed = (_targetVal - _cur) / 10;
                    // 处理小数点
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    // console.log(speed);
                    // 判断当前值是否等于目标值 
                    if (_cur != _targetVal) {
                        // 赋值为false的意义是 防止提前停止定时器
                        isStop = false;
                    }
                    // 设置dom的样式
                    dom.style[prop] = _cur + speed + "px";
                }

                // 循环结束之后 如果布尔值是true,那就说明全部属性都达到目标属性值
                if (isStop) {
                    // 停止定时器
                    clearInterval(dom.timer);
                    // 执行回调函数
                    if (typeof callback == "function") {
                        // 调用回调函数
                        callback()
                    }
                }
            }, 10)
        }



        // 获取相关的元素
        var box = document.querySelector(".box")
        var btn = document.querySelector(".btn-start")

        // 事件绑定
        btn.onclick = function () {
            // 调用animate方法
            dingshiqi = setInterval(function () {
                animate(box, {
                    width: 200,
                    height: 200,
                    borderRadius: 60
                }, function () {
                    animate(box, {
                        width: 300,
                        height: 300,
                        borderRadius: 80
                    }, function () {
                        animate(box, {
                            width: 500,
                            height: 500,
                            borderRadius: 100
                        },function () {
                            animate(box , {
                                width: 100,
                                height:100,
                                borderRadius: 0
                            })
                        })
                    })
                })
            }, 2000)

        }




    </script>
</body>

</html>